<template>
  <div :style="'width:' + width">
    <div class="form-item-label-top">
      <span style="color: red; margin-right: 5px" v-if="required">*</span>
      <div>{{ name }}</div>

      <el-button type="text" size="medium" v-if="allowNew" :icon="employee.isNew ? 'el-icon-minus' : 'el-icon-plus'"
        @click="isNew()" style="position: absolute; right: 20px" :disabled="disabled || !departmentId">
        {{ employee.isNew ? '可选' : '新增' }}
      </el-button>
    </div>
    <el-form :label-width="labelWidth" label-position="left" :disabled="disabled || !departmentId" class="sub-form">
      <el-form-item :label="cmpName" v-if="!inner && !employee.isNew">
        <el-select style="width: 100%" v-model="employee.cmpId" filterable remote reserve-keyword
          placeholder="请输入员工公司进行搜索" no-data-text="找不到匹配数据，请点击右上方按钮进行新增" :remote-method="getCompanies" :loading="loading"
          :disabled="employee.isNew" @change="chooseCompany">
          <template slot="empty">
            <el-link type="primary" v-if="allowNew" @click="isNew()" style="padding: 5px 40px" :disabled="disabled">
              找不到匹配数据，请点击新增
            </el-link>
            <div v-else style="padding: 5px 40px">找不到匹配数据</div>
          </template>
          <el-option v-for="item in companies" :key="item.CMP_ID" :label="item.CMP_Name"
            :value="item.CMP_ID"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="empName" v-if="!employee.isNew">
        <el-select style="width: 100%" v-model="employee.empId" filterable placeholder="请选择员工"
          :disabled="employee.isNew" @change="chooseEmployee">
          <el-option v-for="item in employees" :key="item.ECV_TargetID" :label="item.USR_Name"
            :value="item.ECV_TargetID">
            【{{ item.USR_Name }}】{{ item.USR_Phone | encodePhone }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司" v-if="employee.isNew && !inner">
        <el-input style="width: 100%" v-model="employee.cmpName" placeholder="请输入公司名" @input="addCompany"></el-input>
      </el-form-item>
      <el-form-item label="税号" v-if="employee.isNew && !inner">
        <el-input style="width: 100%" v-model="employee.cmpTaxNo" placeholder="请输入税号" @input="addCompany"></el-input>
      </el-form-item>
      <el-form-item label="姓名" v-if="employee.isNew">
        <div style="display: flex">
          <el-input style="flex: 1" v-model="employee.empName" placeholder="请输入员工姓名" @input="addEmployee"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="手机" v-if="employee.isNew">
        <el-input style="width: 100%" v-model="employee.empPhone" placeholder="请输入员工手机号码"
          @input="addEmployee"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {
  getCompanies,
  getEmployees,
  getCompany,
  getEmployee,
} from '@/api/flowCenter/field/employeeSelection'
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness', 'departmentId'],
  data: function () {
    return {
      employee: {
        empId: null,
        cmpId: null,
        cmpName: '',
        cmpTaxNo: '',
        empName: '',
        empPhone: '',
        isNew: false,
        displayName: '',
      },
      companies: [],
      employees: [],
      loading: false,
    }
  },
  computed: {
    ...mapGetters({
      curEmp: 'user/curEmp',
    }),
    myprops() {
      return this.props ? this.props : []
    },
    labelWidth() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'labelWidth')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '140px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '140px'
        }
      }
      return '140px'
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '员工选择器'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '员工选择器'
        }
      }
      return '员工选择器'
    },
    cmpName() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'cmpName')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '公司'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '公司'
        }
      }
      return '公司'
    },
    empName() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'empName')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '员工'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '员工'
        }
      }
      return '员工'
    },
    inner() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'inner')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    allowNew() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'allowNew')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
  },
  methods: {
    isNew() {
      this.employee.isNew = !this.employee.isNew
      this.input()
    },
    getCompanies(keyword) {
      if (!this.departmentId) {
        this.$message('请先选择部门', 'error')
        return
      }
      if (keyword.length >= 2) {
        this.loading = true
        getCompanies({
          keyword,
          departmentId: this.departmentId,
        }).then(({ data }) => {
          this.companies = data.Items
          this.loading = false
        })
      }
    },
    addCompany() {
      this.employee.cmpId = null
      this.employee.empId = null
      this.input()
    },
    addEmployee() {
      this.employee.empId = null
      this.input()
    },
    chooseCompany(val) {
      if (!this.departmentId) {
        this.$message('请先选择部门', 'error')
        return
      }
      this.employee.cmpId = val
      let cmp = this.companies.find((x) => x.CMP_ID == val)
      this.employee.cmpName = cmp.CMP_Name
      this.employee.cmpTaxNo = cmp.CMP_TaxNo
      getEmployees({
        cmpId: this.employee.cmpId,
        departmentId: this.departmentId,
      }).then(({ data }) => {
        this.employees = data
        this.loading = false
      })
      this.input()
    },
    chooseEmployee(val) {
      this.employee.empId = val
      this.input()
    },
    input() {
      this.employee.displayName = `${this.employee.cmpName}${this.employee.empName}`
      this.$emit('input', JSON.stringify(this.employee))
      this.$emit('display', this.employee.displayName)
    },
  },
  mounted: function () {
    if (this.value && Object.keys(this.value).length) {
      this.employee = JSON.parse(this.value)
      if (this.employee.cmpId) {
        getCompany(this.employee.cmpId).then(({ data }) => {
          this.companies = [data]
        })
      }
      if (this.employee.empId) {
        getEmployee(this.employee.empId).then(({ data }) => {
          this.employees = [data]
        })
      }
    }
    if (this.inner) {
      this.employee.cmpId = this.curEmp.CCV_TargetID
      getEmployees().then(({ data }) => {
        this.employees = data
      })
    }
  },
}
</script>
<style scoped>
let .el-form-item {
  margin: 10px !important;
}
</style>